{% if page.jumbotron == true %}
<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>{{ page.title }}</h1>
                <p class="catch-phrase">
                    {{page.quick-overview}}
                </p>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% if page.menu == true %}
<div class="content">
    <div class="container">
        <div class="row">
            <div class="col-md-9" role="main">
                {{ content }}
            </div>
            <div class="col-md-3">
                <div class="content-nav hidden-print" data-spy="affix" data-offset-top="240" role="complementary">
                    <ul class="nav nav-tabs nav-stacked">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(function() {
    var menuContent = $('.content-nav ul')
    $('h2').each(function(idx, elem) {
      var $elem = $(elem)

      if ($elem.index() > 0) $elem.before('<hr />')

      menuContent.append('<li><a href="#' + elem.id + '">' + elem.innerHTML + '</a></li>')
    })


    $('body').scrollspy({ target: '.content-nav' })
})
</script>
{% else %}
<div class="content">
    <div class="container">
        <div class="row">
            <div class="col-md-12" role="main">
                {{ content }}
            </div>
        </div>
    </div>
</div>
{% endif %}
